/* 页面Reset-begin */

body{
    margin: 0;
    font-size: 12px;
}

h1,h2,h3,h4,h5,h6{
    font-weight: normal;

}

ul, li, input{
    margin: 0;
    padding: 0;
}

li{
    list-style-type: none; /* 取消列表项前的标志 */
}

a{
    text-decoration: none; /* 取消链接标签a的默认下划线 */
}

/* 页面Reset-end */


/* 页面布局定义-begin */

.wrap_page{
    width: 998px; /* 适应于宽度1024px的设计（需要计算去掉垂直滚动条的占位） */
    margin: 0 auto; /* 通过外边距属性：0（上下） auto（左右）容器居中显示  */
}

.clear{
    clear: both;
}

#header{
    width: 998px;
    height: 190px;
    border-top: 4px solid #0d6db9;
    background-color: white;
    overflow: visible;
}

#main_content{
    width: 998px;
    height: 1000px;
    background-color: #fff;
    overflow: hidden;
}

#footer{
    width:998px;
    height:110px;
    background-color:#fff;
    overflow: hidden;
}

/* 页面布局定义-end */

/* 页面头部定义-begin */

#header .logo{
    float: left;  /* 左浮动  浮动主要改变文档流 */
    width: 600px;
    height: 118px;   /*  原高度为140px 增加内边距22px后，高度修正为118px，实际占用高度仍为140px */
    padding-top: 22px;  /* 可以通过计算是块级内容垂直居中 */
    padding-left: 20px;
}

#header .header_right{
    float:left;
    width: 308px;
    height: 140px;
    margin-left: 70px;
}

#header .header_right h2{
    color: red;
    margin-top: 40px;
    font-size: 18px;
}

/* 头部搜索栏 */
#header .search{
    width: 290px;
    height: 40px;
    padding-left: 10px;
    background: url("../img/top_hunt_bg.png") no-repeat;
}

#header .search input[type="text"]{
    float:left; /* input是块级元素，浮动以后可以平铺排列*/
    border: 0;
    margin-top: 2px;
    height: 30px;
    width: 200px;
}

#header .search input[type="button"]{
    float:left;
    border: 0;
    margin-top: 2px;
    height: 30px;
    width: 60px;
    background: url("../img/top_hunt.png") no-repeat right center;
}

/* 头部菜单 */

#header .nav_menu{
    background-color: #0b6cb8;
    /* 垂直居中：单行的垂直居中通常使用行高与高度相同的方式控制 */
    height:50px;
    line-height: 50px;
}

#header .nav_menu a{
    display: block; /* a默认是行级元素，通过该属性可以变为块级元素 */
    width:100px;
    height:50px;
    color: white;
    font-size: 16px;
    text-align: center;
}

#header .nav_menu a:hover{
    background-color: #0a5894;
}

#header .nav_menu ul {
    width: 972px;
}

#header .nav_menu li.main_menu{
   float: left;
   width: 108px;
   height: 50px;
    
}

#header .nav_menu ul.sub_menu{
    visibility: hidden;
    background-color: #0a5894;
    width: 100px;
}

#header .nav_menu ul.sub_menu a{
    height: 40px;
    line-height: 40px;
}

#header .nav_menu ul.sub_menu a:hover{
    background-color: #0b6cb8;
}

#header .nav_menu li.main_menu:hover .sub_menu{
    visibility: visible;
    position: relative;
    z-index: 100;
}



/* 页面头部定义-end */

/* 页面内容定义-start */

/* 页面banner */
#main_content .banner_slide{
    width: 998px;
    height: 280px;
    position: relative; /* 从文档流变为相对定位，作为其内容的定位锚 */
}

#main_content .banner_slide .slide_img li{
    position:absolute; /* 默认是 left=0  top=0 */
}

#main_content .banner_slide .slide_img img{
    width: 998px;
    height: 280px;
}

#main_content .banner_slide .slide_nav{
    position: absolute;
    width: 195px;
    height: 5px;
    right: 40%;  /*  绝对定位后：距离右边的距离 */
    bottom: 20px;  /*  绝对定位后：距离底部的距离 */
    z-index: 10;
}

#main_content .banner_slide .slide_nav li{
    float: left;
    width: 60px;
    height: 5px;
    margin-left: 5px;
    background-color: #8f8586;
    border-radius: 2px;  /* CSS3中的边框四角弧度定义 */
    
}

#main_content .banner_slide .slide_nav li:hover{
    background-color: #fff;
    cursor: pointer;  /* 定义鼠标指针 */
}


/* 页面信息内容 */
.info_section{
    width: 998px;
    height: 480px;
}

.info_section div{
    float:left;
}

/* 图片新闻 */
.section_pic{
    width: 312px;
    height: 230px;
    margin-top: 20px;
    position: relative;
}

.section_pic ul{
    position: absolute;
}

.section_pic img{
    width:312px;
    height: 230px;
    position: absolute;
}

.section_pic .section_pic_nav{
    position: absolute;
    width: 120px;
    height: 24px;
    right: 5px;  /*  绝对定位后：距离右边的距离 */
    bottom: 5px;  /*  绝对定位后：距离底部的距离 */
    z-index: 10;
}

.section_pic .section_pic_nav li{
    float: left;
    width: 10px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    padding: 1px 7px;
    margin-left: 5px;
    font-size: 15sp;
    color: white;
    background-color: #8f8586;
    border-radius: 5px;  /* CSS3中的边框四角弧度定义 */
    
}

.section_pic .section_pic_nav li:hover{
    background-color: rgb(241, 123, 10);
    cursor: pointer;  /* 定义鼠标指针 */
}





/* 新闻速递 */
.section_news{
    width: 334px;
    height: 230px;
    margin-top: 20px;
    padding: 0 10px;
}

.section_news .title{
    width: 334px;
    height: 36px;
    border-bottom: 1px solid #d7d7d7;
}

.section_news .title h2{
    float: left;
    margin: 0;
    width: 74px;
    height: 34px;
    line-height: 34px;
    padding: 0 5px;
    border-bottom: 2px solid #2780cb;
    font-size: medium;
}

.section_news .title .more {
    float: right;
    margin-right: 5px;
    width: 33px;
    height: 36px;
    line-height: 36px;
}

.section_news .content{
    float: left;
    height:182px;
    width: 334px;
    margin-top: 12px;
}

.section_news .content li{
    width: 314px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding-left: 20px;
    background: transparent url(../img/xdd.png) no-repeat 20px center;
    text-indent: 12px;
}

.section_news .content li .subject{
    display: block;
    float: left;
    width : 250px;
    height: 30px;
    overflow: hidden;
    color: #000000;
}

.section_news .content li .date{
    display: block;
    float: right;
    width : 60px;
    height: 30px;
    text-indent: 0;
    text-align: right;
    color: #c3c3c3;
}

.section_news .content li:hover .subject, 
.section_news .content li:hover .date{
    color: #0b6cb8;
}

/* 通知公告 */
.section_anno{
    width: 312px;
    height: 230px;
    margin-top: 20px;
    padding: 0 10px;
}

.section_anno .title{
    width: 312px;
    height: 36px;
    border-bottom: 1px solid #d7d7d7;
}

.section_anno .title h2{
    float: left;
    margin: 0;
    width: 74px;
    height: 34px;
    line-height: 34px;
    padding: 0 5px;
    border-bottom: 2px solid #2780cb;
    font-size: medium;
}

.section_anno .title .more {
    float: right;
    margin-right: 5px;
    width: 33px;
    height: 36px;
    line-height: 36px;
}

.section_anno .content{
    float: left;
    height:182px;
    width: 312px;
    margin-top: 12px;
}

.section_anno .content li{
    width: 212px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background: transparent url(../img/xdd.png) no-repeat left center;
    text-indent: 12px;
}

.section_anno .content li a{
    display: block;
    float: left;
    width : 292px;
    height: 30px;
    overflow: hidden;
    color: #000000;
}

.section_anno .content li:hover a{
    color: #0b6cb8;
}

/* 创客沙龙 */
/* .section_safa{
    width: 312px;
    height: 210px;
    margin-top: 20px;
} */

/* 下载专区 */
/* .section_down{
    width: 354px;
    height: 210px;
    margin-top: 20px;
} */

/* 创客沙龙 & 下载专区 */
.section_two_row{  /* box: 占位高度230px */
    width: 333px;
    height: 210px;
    margin-top: 20px;   
}

.section_two_row .title{
    width: 320px;
    height: 36px;
    margin-right: 13px;
    background-color: #2780cb;
    color: rgb(255,255,255);
    /* color: white;
    color: #ffffff; */
}

.section_two_row .title h2{
    float: left;
    margin: 0 0 0 10px;
    width: 74px;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    font-size: medium;
    /* border-bottom: 2px solid #2780cb; */
    /* background-color: #2780cb; */
}

.section_two_row .title .more {
    float: right;
    margin-right: 10px;
    width: 33px;
    height: 36px;
    line-height: 36px;
}

.section_two_row .content{
    float: left;
    width: 318px;
    height: 162px;
    margin-top: 10px;
    border: 1px solid #ebebeb;
}

.section_two_row .content li{
    width: 310px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    padding-left: 8px;
    background: transparent url(../img/xdd.png) no-repeat 8px center;
    text-indent: 12px;
}

.section_two_row .content li .subject{
    display: block;
    float: left;
    width : 250px;
    height: 30px;
    overflow: hidden;
    color: #000000;
}

.section_two_row .content li .date{
    display: block;
    float: right;
    width : 55px;
    margin-right: 5px;
    height: 30px;
    text-indent: 0;
    text-align: right;
    color: #c3c3c3;
}

.section_two_row .content li:hover .subject, 
.section_two_row .content li:hover .date{
    color: #0b6cb8;
}


/* 芳兰分园 */
.section_fl{
    width:332px;
    height: 210px;
    margin-top: 20px;
}

/* 企业采风 */
.enterprise {
    width: 976px;
    height: 240px;
    margin-top: 20px;
    overflow: hidden;
}

.enterprise .title{
    width: 976px;
    height: 36px;
    color: rgb(0,0,0);
    /* color: white;
    color: #ffffff; */
}

.enterprise .title h2{
    float: left;
    margin: 0 0 0 5px;
    width: 74px;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    font-size: medium;
    /* border-bottom: 2px solid #2780cb; */
    /* background-color: #2780cb; */
}



.enterprise .title .more {
    float: right;
    margin-right: 10px;
    width: 33px;
    height: 36px;
    line-height: 36px;
}

.enterprise .content{
    float: left;
    width: 954px;
    height: 202px;
    padding: 10px 20px;
    border: 1px solid #dedede;
    text-align: center;
}

.enterprise li{
    float: left;
    width: 186px;
    height: 162px;
}

.enterprise li img{

    width: 168px;
    height: 135px;
    margin: 0 5px;

}
.enterprise li p{
    width: 178px;
    height: 22px;
    margin: 5px 0 0 0;

}


/* 页面内容定义-end */

/* 页面底部定义-start */

.friend_links{
    width: 998px;
    height: 36px;

}

.friend_links h2{
    float:left;
    margin: 0 0 0 5px;
    width: 75px;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    font-size: medium;
    background-color: #2780cb;
    color: #fff;
    text-align: center;
}

.friend_links .content{
    float:left;
    margin: 0 0 0 5px;
    width: 900px;
    height: 36px;
}

.friend_links li{
    float:left;
    height: 36px;
    margin-right: 10px;
    line-height: 36px;
    font-size: medium;
}

.friend_links li a{
    display: block;
    height: 20px;
    line-height: 20px;
    margin-top: 8px;
    color: #000;
    padding-left: 10px;
    border-left: 1px solid rgb(104, 104, 104);
}

.friend_links li a.first{
    border-left: 1px solid white;
}

.friend_links li a:hover{
    color:tomato;
}


.copyright{
    width: 998px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #1f66a0;
    color: white;
}

/* 页面底部定义-end */


/* 
关于css的优化：

1、大量ctrl+c 与 ctrl+v 表示有风格描述可以合并 

2、充分利用“层叠”的概念

3、进阶：SASS   --  Web前端开发




*/